<template>
  <div class="order-create">
    <div class="container">

      <createTop firstMenu="配料采购" secondMenu="入库添加" title="入库"></createTop>

      <el-card class="top-card" shadow="always" v-loading="loading">
        <div slot="header" class="card-title">
          <div class="left">待入库清单</div>
        </div>
           <div class="order-create-table-wrap">
              <el-table
                :data="tableData"
                style="width: 100%"
                :fit="true"
                :stripe="true"
                size="mini"
                align="center">

                <el-table-column
                  prop="materials_number"
                  label="配料编号"
                  min-width="100"
                  align="center">
                </el-table-column>

                <el-table-column
                  prop="materials_name"
                  label="配料名称"
                  min-width="130"
                  align="center">
                </el-table-column>

                <el-table-column
                  prop="formats_name"
                  label="规格/型号"
                  min-width="130"
                  align="center">
                </el-table-column>

                <el-table-column
                  prop="materials_unit"
                  label="单位"
                  min-width="120"
                  align="center">
                </el-table-column>
                
                <el-table-column 
                  prop="suppliers_nickname"
                label="供应商"
                min-width="110"
                align="center">
                </el-table-column>

                <el-table-column
                  prop="purchase_count"
                  label="采购数"
                  min-width="120"
                  align="center">
                </el-table-column>

                <el-table-column
                  prop="have_handles"
                  label="已入库数"
                  min-width="120"
                  align="center">
                </el-table-column>
                
                <el-table-column 
                label="本次入库数"
                min-width="110"
                align="center">
                  <template slot-scope="scope">
                    <el-input 
                    v-model="scope.row.inStrokeCount" 
                    placeholder="本次入库数"></el-input>
                  </template>
                </el-table-column>
              </el-table>

            </div>
      </el-card>

      <el-card :style="{'margin-bottom':'20px'}" shadow="always" v-loading="loading">
        <div slot="header" class="card-title">
          <div class="left">采购信息</div>
        </div>
        <div class="content">
          <div class="se">
            <div class="content-title">制单人</div>
            <el-input :style="{'width':'350px'}" disabled placeholder="读取账号"></el-input>
          </div>
  <div class="se">

            <div class="content-title">入库单号 <span class="red-icon">※</span> </div>
            <el-input :style="{'width':'350px'}" disabled v-model="order" placeholder="自动填充"></el-input>
  </div>
        </div>

        <div class="content">
          <div class="se">

          <div class="content-title">入库日期 <span class="red-icon">※</span></div>
            <el-date-picker
             :style="{'width':'350px'}"
              v-model="date"
              type="date"
              placeholder="选择日期时间"
              value-format="yyyy-MM-dd">
            </el-date-picker>

          <div class="content-title">经办人</div>
            <el-input :style="{'width':'350px'}" v-model="doName" placeholder="输入经办人姓名"></el-input>

          <!-- <div class="content-title">全部入库</div> -->
          
          <div>
            <el-checkbox :style="{'marginTop':'25px'}" border v-model="allIn">确认全部入库 </el-checkbox><span class="tip"> 此项选中后默认为全部入库!</span>
          </div>

          </div>
        <div class="se">

          <div class="content-title">入库类型</div>
            <el-input :style="{'width':'350px'}" disabled placeholder="采购入库"></el-input>

          <div class="content-title">入库备注</div>
            <el-input :style="{'width':'350px'}" v-model="remark" type="textarea" :rows="5" resize="none" placeholder="输入适当的备注方便管理"></el-input>
        </div>

        </div>
          <div :style="{'marginTop':'15px'}" class="content-title">采购单号:  </div>
            <div>{{info.inNumber}}</div>

          <div :style="{'marginTop':'15px'}" class="content-title">采购员: </div>
            <div>{{info.zhiDanUsername}}</div>
      </el-card>

    <el-button class="confirm-btn" type="primary" size="small" @click="confirm">入库</el-button>

    </div>
  </div>
</template>
<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import createTop from '@/components/createTop.vue';
import saveBtn from '@/components/saveBtn.vue';
import ajaxResquest from '@/api/apiRequest';
import childTable from '@/tables/supplier/supplierOrderCreateChild.vue';
import { Watch } from 'vue-property-decorator';
@Component({
  components: {
    createTop,
    saveBtn
  }
})
export default class SupplierToStroke extends Vue {
  createRes!: ajaxResquest;
  infoRes!: ajaxResquest;
  doName: string = '';
  loading: boolean = false;
  id!: string;
  date: string = '';
  leixing: string = '其他出库';
  sellName: string = '';
  order: string = '';
  remark: string = '';
  tableData: any[] = [];

  inCount: string = '';
  tableRemark: string = '';
  showMask: boolean = false;

  showChild: boolean = false;

  customers: any[] = [];
  customer: string = '';
  te: string = '';
  allPrice: number = 0;
  allIn: boolean = false;
  // 客户信息
  customerInfo: any = {};
  supplier: string = '';
  info: any = {};

  mounted() {
    this.id = this.$route.query.id;
    console.log(this.$route.query);
    this.infoRes = new ajaxResquest('/purchase/purchaseHandlesPage');
    this.createRes = new ajaxResquest('/purchase/purchaseHandlesToDo');
    this.getInfo();
  }

  getInfo() {
    this.infoRes.getFunction({ purchaseInfoId: this.id }).then((res: any) => {
      console.log(res);
      if (res.data.code === 1) {
        this.info = res.data.data.types.info;
        let o = res.data.data.types.list;
        o.map((i: any) => {
          i.inStrokeCount = i.can_handles;
        });
        this.tableData = o;
      }
    });
  }
  add(val: any) {
    this.showChild = true;
  }
  del(index: number, val: any) {
    this.tableData.splice(index, 1);
  }
  clseChild() {
    this.showChild = false;
  }

  supplierChange(row: any) {
    console.log(row.row);
    if (row.row._supplier) {
      let price: any;
      row.row.suppliers_info.forEach((e: any) => {
        if (e.suppliers_id === row.row._supplier) {
          price = e.price;
        }
      });
      this.$set(this.tableData[row.$index], '_price', price);
      if (row.row.purchase_count) {
        console.log(row.row.purchase_count);
        console.log(row.row._price);
        let val =
          parseFloat(row.row.purchase_count) * parseFloat(row.row._price);
        this.$set(this.tableData[row.$index], 'allPrice', val);
      }
      let temp: number = 0;
      this.tableData.map(i => {
        if (i.allPrice) {
          temp = temp + parseFloat(i.allPrice);
        }
      });
      this.allPrice = temp;
    }
  }
  confirm(): void {
    let temp = this.tableData;
    let isZero: any = false;
    if (this.date === '') {
      this.$message.error('入库时间不能为空!');
      return;
    }
    let sTemp: any = temp.map((i: any) => {
      if (i.inStrokeCount > i.can_handles) {
        this.$message.error('入库数量超过可用数量!');
        isZero = true;
      }
      if (i.inStrokeCount ==='0') {
        this.$message.error('入库数量不能为零!');
        isZero = true;
      }
      return {
        materials_id: i.materials_id,
        number: i.inStrokeCount,
        format_id: i.format_id
      };
    });
    if (isZero) {
      return;
    }
    sTemp = JSON.stringify(sTemp);

    let data: any = {
      allIn: this.allIn,
      purchaseInfoId: this.id,
      purchaseInfo: sTemp,
      doName: this.doName,
      date: this.date,
      remarks: this.remark,
      type: 'in',
      state: '采购入库'
      // otherPrice: this.otherPrice,
      // allPrice: this.allPrice
    };
    this.createRes.getFunction(data).then((res: any) => {
      if (res.data.code === 1) {
        this.$to('supplierOrder');
      }
    });
  }
  selectChange(val: any) {
    // console.log(val);
    let temp;
    this.customers.map((i: any) => {
      if (i.id === val) {
        this.customerInfo = i;
      }
    });
  }
}
</script>
<style lang="less">
.order-create {
  padding: 15px;
  display: flex;
  flex-direction: column;
  z-index: 101;
  box-sizing: border-box;
  overflow: auto;
  .top-card {
    box-sizing: border-box;
    margin-bottom: 15px;
  }
  .el-card {
    overflow-y: auto;
  }
  .content {
    font-size: 16px;
    background-color: #fff;
    border-radius: 4px;
    .content-title {
      height: 30px;
      margin-top: 5px;
      line-height: 2;
      text-align: left;
    }
    .short-input {
      width: 100%;
      width: 240px;
      margin-right: 10px;
    }
    .el-upload-list__item {
      width: 350px;
    }
    .el-textarea {
      margin-bottom: 10px;
    }
  }
  .card-title {
    position: relative;
    .right {
      position: absolute;
      right: 0px;
      top: -5px;
    }
  }
  .search {
    text-align: left;
    margin-left: 10px;
    margin-bottom: 15px;
  }
  .info {
    text-align: left;
    .item {
      height: 30px;
    }
  }
  .otherPrice {
    margin-top: 10px;
    width: 100%;
    justify-content: flex-end;
    display: flex;
    align-items: center;
  }
  .fapiao {
    text-align: left;
    margin-top: 15px;
    .item {
      height: 30px;
    }
    .fapiao-select {
      height: 45px;
    }
  }
  .left {
    text-align: left;
    font-weight: 600;
  }
}
</style>
